<script setup lang="ts">

import {getCurrentInstance} from "vue";
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import {Shop, ShopLists, SycmShopAnalysisSale} from "~/contentScripts/views/sycm/shop_analysis/SycmShopAnalysisSale";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin} from "~/logic";
import {SycmTableUtils} from "~/utils/sycm/SycmTableUtils";

const loading = ref<boolean>(false);
const loginVisible = ref<boolean>(false);
const visible = ref<boolean>(false);
const showZs = ref<boolean>(false);
const shopLists = ref<ShopLists>();
const columns = ref<Array<any>>([]);
const dataSource = ref<Array<any>>([]);
const calcDataSource = () => {
  let date = document.querySelector("[id^=__qiankun_microapp_wrapper_for_op_mc] div.oui-date-picker-current-date").innerHTML.replaceAll('统计时间','').replaceAll(' ','');
  dataSource.value = [];
  const data: any[] = [];
  shopLists.value?.selfShop?.FlowTableData?.forEach((table: any, index: number) => {
    const obj = {
      shop: {
        title: shopLists.value?.selfShop?.title,
        logo: shopLists.value?.selfShop?.logo,
        shopId: shopLists.value?.selfShop?.shopId,
      },
      type: '本店',
      ...{
        date: date,
        ...table,
      }
    };
    data.push(obj);
    if (shopLists.value?.shop1 && typeof shopLists.value?.selfShop?.FlowTableData!='undefined') {
      const table1 = shopLists.value?.shop1?.FlowTableData[index];
      const obj = {
        shop: {
          title: shopLists.value?.shop1.title,
          logo: shopLists.value?.shop1.logo,
          shopId: shopLists.value?.shop1.shopId,
        },
        type: '竞店1',
        ...{
          date: date,
          ...table1,
        }
      };
      data.push(obj);
    }
    if (shopLists.value?.shop2 && shopLists.value?.shop1?.FlowTableData) {
      const table2 = shopLists.value?.shop1?.FlowTableData[index];
      const obj = {
        shop: {
          title: shopLists.value?.shop2.title,
          logo: shopLists.value?.shop2.logo,
          shopId: shopLists.value?.shop2.shopId,
        },
        type: '竞店1',
        ...{
          date: date,
          ...table2,
        }
      };
      data.push(obj);
    }
  });
  console.log(data);
  dataSource.value = data;
};
const calcColumns = () => {
  columns.value = [
    {
      dataIndex: 'shop.title',
      title: '店铺名称',
      width: 180,
      dataType: 'shop',
      sorter: (a: any, b: any) => a.shop.title.localeCompare(b.shop.title),
      dataField: {
        shop_title: 'shop.title',
        shop_pic: 'shop.logo',
        shop_id: 'shop.shopId',
      },
    },
    {
      dataIndex: 'type',
      title: '类别',
      width: 80,
      sorter: (a: any, b: any) => a.type.localeCompare(b.type),
      dataType: 'custom',
      slot: 'type',
    },
    {
      dataIndex: 'pageName1',
      title: '一级来源',
      width: 100,
      sorter: (a: any, b: any) => a.pageName1.localeCompare(b.pageName1),
    },
    {
      dataIndex: 'pageName2',
      title: '二级来源',
      width: 100,
      sorter: (a: any, b: any) => a.pageName2.localeCompare(b.pageName2),
    },
    {
      dataIndex: 'pageName3',
      title: '三级来源',
      width: 100,
      sorter: (a: any, b: any) => a.pageName3.localeCompare(b.pageName3),
    },
    {
      dataIndex: 'TradeIndex.value',
      title: showZs.value ? '交易指数' : '交易金额',
      sorter: (a: any, b: any) => a.TradeIndex.value - b.TradeIndex.value,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (Object.keys(record.TradeIndex).length == 0 || record.TradeIndex.value === null) {
          return '-';
        }
        if (showZs.value) {
          return record.TradeIndex.value;
        }
        return SycmTableUtils.tranNumber(showZs.value, record.TradeIndex.value, 0, false);
      }
    },
    {
      // 访客数
      dataIndex: 'UvIndex.value',
      title: showZs.value ? '流量指数' : '访客数',
      sorter: (a: any, b: any) => a.UvIndex.value - b.UvIndex.value,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (Object.keys(record.UvIndex).length == 0 || record.UvIndex.value === null) {
          return '-';
        }
        if (showZs.value) {
          return record.UvIndex.value;
        }
        return SycmTableUtils.tranNumber(showZs.value, record.UvIndex.value, 0, false);
      }
    },
    { // PayRateIndex 支付转化率
      dataIndex: 'PayRateIndex.value',
      title: '支付转化率',
      sorter: (a: any, b: any) => a.PayRateIndex.value - b.PayRateIndex.value,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (Object.keys(record.PayRateIndex).length == 0 || record.PayRateIndex.value === null) {
          return '-';
        }
        return SycmTableUtils.tranRatio(false, record.PayRateIndex.value);
      }
    },
    { // PayByrCntIndex 支付买家数
      dataIndex: 'PayByrCntIndex.value',
      title: '支付买家数',
      sorter: (a: any, b: any) => a.PayByrCntIndex.value - b.PayByrCntIndex.value,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (Object.keys(record.PayByrCntIndex).length == 0 || record.PayByrCntIndex.value === null) {
          return '-';
        }
        return SycmTableUtils.tranNumber(false, record.PayByrCntIndex.value, 0, false);
      }
    },
    { // 客单价
      dataIndex: 'customerPrice',
      title: '客单价',
      sorter: (a: any, b: any) => a.customerPrice - b.customerPrice,
      align: 'right',
    },
    { // UV价值
      dataIndex:'uvValue',
      title: 'UV价值',
      sorter: (a: any, b: any) => a.uvValue - b.uvValue,
      align: 'right',
    },
    { // 日期
      dataIndex: 'date',
      title: '日期',
      // width: 100,
      sorter: (a: any, b: any) => a.date.localeCompare(b.date),
    },
  ];
}
const __option = getCurrentInstance()?.appContext.provides.option;
const handle = async () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    },
  }, __option)) {
    loading.value = true;
    const shops = await SycmShopAnalysisSale.getShops();
    shopLists.value = await SycmShopAnalysisSale.assignShopListFlowTable(shops);
    calcColumns();
    calcDataSource();
    loading.value = false;
    visible.value = true;
  }
}
watch(() => showZs.value, () => {
  calcColumns();
  calcDataSource();
}, {deep: true});
</script>

<template>
  <base-app>
    <a-button-group>
      <user style="margin-right: 0;"/>
      <a-button type="primary" size="small" @click="handle" :loading="loading">
        一键转化
      </a-button>
    </a-button-group>
    <user-login-modal v-model:login-visible="loginVisible"/>
    <custom-modal :title="`竞争-竞店分析-流量分析-入店来源`" width="95%" style="top: 10px;" v-model:open="visible">
      <template #headerRight>
        <SYCMCustomModalHeaderNotice/>
        <a-checkbox style="margin-left: 10px;" v-model:checked="showZs">显示指数</a-checkbox>
      </template>
      <div style="max-height: calc(100vh - 100px);overflow-y: auto;">
        <base-table table-name="竞争-竞店分析-流量分析-入店来源" :columns="columns" :data-source="dataSource"
                    :scroll="{
        y:740,
      }"
        >
          <template #type="record">
            <a-tag color="green" v-if="record.type==='本店'">
              本店
            </a-tag>
            <a-tag color="purple" v-else-if="record.type==='竞店1'">
              竞店1
            </a-tag>
            <a-tag color="orange" v-else-if="record.type==='竞店2'">
              竞店2
            </a-tag>
          </template>
        </base-table>
      </div>

    </custom-modal>
  </base-app>
</template>

<style scoped>

</style>
